<template>
  <div class="mine">
    <div class="form">
      <group title="数据查询">
        <selector placeholder="测站点" v-model="station" title="" name="station" :options="list" @on-change="handleStation"></selector>
        <datetime v-model="startTime" default-selected-value="2017-06-18 13:01" format="YYYY-MM-DD HH:mm" placeholder="开始时间" @on-change="handleStartTime" title="开始时间"></datetime>
        <datetime v-model="endTime" default-selected-value="2017-06-18 13:01" format="YYYY-MM-DD HH:mm" placeholder="结束时间" @on-change="handleEndTime" title="结束时间"></datetime>
        <x-button type="primary" action-type="button">查询</x-button>
      </group>
    </div>
     <x-table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Apple</td>
            <td>$1.25</td>
          </tr>
          <tr>
            <td>Banana</td>
            <td>$1.20</td>
          </tr>
        </tbody>
      </x-table>
  </div>
</template>

<script>
import { XTable, Group, Selector, Datetime, XButton } from 'vux'
export default {
  components: {
    Group,
    XTable,
    Selector,
    Datetime,
    XButton
  },
  data () {
    return {
      station: '',
      startTime: '',
      endTime: '',
      list: [{key: 'gd', value: '广东'}, {key: 'gx', value: '广西'}]
    }
  },
  methods: {
    handleStation (val) {
      console.log(val)
    },
    handleStartTime (val) {
      console.log(val)
    },
    handleEndTime (val) {
      console.log(val)
    }
  }
}
</script>

<style lang="less" scoped>
.mine {
  padding-top: 50px;
}

.form {
  margin-bottom: 20px;
}
button {
  margin: 20px 0;
}
</style>

